<?php
$setting = Yii::$app->setting;
$per_url = Yii::$app->params['imgurl'];

$taglist = \common\components\Tools::tagToTxt($parent_model->mark);

$tagstr = $title;
if(count($taglist) > 0){
    foreach($taglist as $v){
        $tagstr .= ',' . $v['cont'] ;
    }
}

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title><?=$title .' '. $model->front_title .' | '. $setting->get('site_title')?></title>
    <meta name="keywords" content="<?=$tagstr?>">
    <meta name="Description" content="<?='《'. $title .'》' . $parent_model->intro?>">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        body{
            padding:0px;
            margin:0px;
            background-color:#fff !important;
        }
        .photo-list{padding:10px 0px;margin-top: 36px;line-height:0;font-size: 0;}
        .photo-list p{
            margin-bottom:0px;
            padding:0px;
        }
        .photo-list img{width:100%;}

        .gotop{
            position:fixed;
            bottom:80px;
            right:5px;
            display:none;
            margin: 3px;
            width: 50px;
            height: 50px;
            display: inline-block;
            text-align: center;
            color:#333;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 25px;
            background-clip: padding-box;
        }
        .deng{
            position:fixed;
            bottom:140px;
            right:5px;
            display:none;
            margin: 3px;
            width: 50px;
            height: 50px;
            display: inline-block;
            text-align: center;
            color:#333;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 25px;
            background-clip: padding-box;
            line-height: 2.7;
        }
        .action{
            display: flex;
            align-items: center;
            text-align: center;
            height:80px;
            width:100%;
            background-color:#f1f1f8;
        }
        .mybutton{
            background-color: #f1f1f8 !important;
            border-radius: 6px !important;
            padding: 6px 24px !important;
        }
        .action-pro{
            display: none;
            position: fixed;
            bottom:0px;
            left:0px;
            background-color: #fff;
            text-align: center;
            height:80px;
            width:100%;
            padding-top: 25px;
            border-radius: 8px 8px 0px 0px;
            box-shadow: 0 0 6px #ccc;
        }

    </style>
    <!--    css-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css">
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
</head>
<body>

<div class="page-book-view">
    <header id="myheader" class="mui-bar mui-bar-nav">
        <a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
        <a href="/touch/default/index" class="mui-icon mui-action-menu mui-icon-home mui-pull-right" style="color: #333;"></a>
        <h1 class="mui-title"><?=$model->front_title?></h1>
    </header>

    <div class="photo-list">
        <?php foreach($model->getPhotolist() as $k=>$v){ ?>
            <p><img class="lazyer" data-original="<?=$per_url . $v['path']?>" alt="<?=$title . $v['title'] . '.jpg'?>"></p>
        <?php }?>
    </div>

    <div class="action">
        <div class="" style="flex: 1">
            <?php if($pre_model['number']){ ?>
                <a href="/book/<?=$pre_model['number']?>.html">
                    <button type="button" class="mui-btn mui-icon mui-icon-arrowthinleft mui-left mybutton">
                        上一话
                    </button>
                </a>
            <?php }?>
        </div>
        <div class="" style="flex: 1">
            <a href="/touch/default/catalog?idpro=<?=$idpro?>">
                <button type="button" class="mui-btn mui-icon mui-icon-bars mui-left mybutton">
                    选集
                </button>
            </a>
        </div>
        <div class="" style="flex: 1">
            <?php if($next_model['number']){ ?>
                <a href="/book/<?=$next_model['number']?>.html">
                    <button type="button" class="mui-btn mui-icon mui-icon-arrowthinright mui-right mybutton">
                        下一话
                    </button>
                </a>
            <?php }?>
        </div>
    </div>

    <div class="action-pro">
        <div style="display: flex;align-items: center;">
            <div style="flex: 1">
                <a href="/touch/default/catalog?idpro=<?=$idpro?>">
                    <button type="button" class="mui-btn mui-icon mui-icon-bars mui-left mybutton">
                        目录
                    </button>
                </a>
            </div>
            <div style="flex: 1">

                <button id="collect" type="button" class="mui-btn mui-icon mui-icon-plus mui-left mybutton">
                    收藏
                </button>

            </div>
        </div>
    </div>

</div>
<div class="gotop">
    <span class="mui-icon mui-icon-arrowthinup" style="margin-top: 12px;"></span>
</div>

<div class="deng">
    <span class="">关</span>
</div>

</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/jquery.lazyload.min.js?v=1.9.1"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script type="text/javascript" charset="utf-8">

    $(function() {

        // 回到顶部
        $(window).scroll(function(){
            var sc=$(window).scrollTop();
            if(sc>0){
                $(".gotop").css("display","block");
            }else{
                $(".gotop").css("display","none");
            }
        });
        $(".gotop").click(function(){
            $('body,html').animate({scrollTop:0},500);
        });

        // 图片懒加载
        $("img.lazyer").lazyload({
            effect: "fadeIn",
            // placeholder:'https://ws1.sinaimg.cn/large/6ea2dd75gy1ftpkszf06sg20ay0goh5g.jpg'
        });


        $('body').on('touchstart', function(e) {
            var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;
            startY = touch.changedTouches[0].pageY;
            $('body').on('touchmove', function(e) {
                touch = e.originalEvent.touches[0] ||
                    e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10) {
                    console.log("右划");
                    showPrevious();
                    $('body').off('touchmove');
                } else if (touch.pageX - startX < -10) {
                    console.log("左划");
                    showNext();
                    $('body').off('touchmove');
                };
                if (touch.pageY - startY > 10) {
                    console.log("下划");
                    $('body').off('touchmove');
                } else if (touch.pageY - startY < -10) {
                    console.log("上划");
                    $('.action-pro').fadeOut(500);
                    $('body').off('touchmove');
                };
            });

            // Return false to prevent image
            // highlighting on Android
            return false;

        }).on('touchend', function() {
            $('body').off('touchmove');
        });

        $('.photo-list').click(function(){
            var _this = $('.action-pro');
            if(_this.hasClass('active')){
                _this.fadeOut(500);
                _this.removeClass('active');
            }else{
                _this.fadeIn(500);
                _this.addClass('active');
            }
        });

        $('.deng').click(function(){
            $('.gotop').remove();
            $('.action-pro').remove();
            $(this).remove();
        });

        $('#collect').click(function(){
            $.ajax({
                type: 'POST',
                url: "/touch/default/collection",
                data:{
                    code:<?=$parent_model->number?>,
                },
                dataType: 'json',
                success: function(res){
                    if(res.code == 200){
                        layer.msg(res.message);
                    }else if(res.code == 202){
                        window.location.href = '/touch/default/login';
                    }else{
                        layer.msg(res.message);
                    }
                },
                error:function (error) {
                    console.log('error:',error);
                }
            })
        });


    });

</script>
